VAImage

A common component to display static images. New images need to be placed in VAImge/image and in Xcode under VAMobile/Images.xcassets. Examples/details can be found in VAImage component.

Properties

Name	Type	Default Value	Required	Description
name	"PaperCheck"		Yes	enum name of the image
a11yLabel	string		Yes	accessibilityLabel for the overall component
marginX	number		Yes	margins for the image

Example

How to use the VAImage component

<VAImage name={'PaperCheck'} a11yLabel={'label'} marginX={10} />

Source Code

Full code for the VAImage component

import React, { FC } from 'react'
import { Image, useWindowDimensions } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

/**
 * Add images to android('res/drawable') and in xcode('Images.xcassets') when new ones are added.
 * Android and IOS are not rendering using local path(ex. require('./images/asset.png')) and needs to be added as an asset resource.
 * Width and height should match whatever the image is.
 */
export const VA_IMAGES_MAP = {
  PaperCheck: {
    width: 922,
    height: 492,
    source: { uri: 'paper_check' },
  },
}
/**
 *  Signifies the props that need to be passed in to {@link VAImage}
 */
export type VAImageProps = {
  /** enum name of the image */
  name: keyof typeof VA_IMAGES_MAP
  /** accessibilityLabel for the overall component */
  a11yLabel: string
  /** margins for the image */
  marginX: number
}

/**
 * A common component to display static images.
 * New images need to be placed in VAImge/image and in Xcode under VAMobile/Images.xcassets.
 * Examples/details can be found in VAImage component.
 *
 * @returns VAImage component
 */
const VAImage: FC<VAImageProps> = ({ name, a11yLabel, marginX }) => {
  const safeAreaRightMargin = useSafeAreaInsets().right
  const safeAreaLeftMargin = useSafeAreaInsets().left

  // Subtracting safe area insets from image width
  const width = useWindowDimensions().width - 2 * marginX - safeAreaLeftMargin - safeAreaRightMargin
  const imageProps = VA_IMAGES_MAP[name]

  if (!imageProps) {
    return <></>
  }

  const ratio = width / imageProps.width

  return (
    <Image
      source={imageProps.source}
      style={{ width: width, height: imageProps.height * ratio }}
      accessibilityLabel={a11yLabel}
      accessible={true}
      accessibilityRole={'image'}
      testID={a11yLabel}
    />
  )
}

export default VAImage

Accessibility